<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin: 0;
				padding : 0;
			}
			#main{
				width :800px;
				height: 600px;
				background-color: gainsboro;
				align-self: center;
				margin :10px auto;
			}
			.rowline{
				width: 100%;
			}
			.column{
				float: left;
				width: 50%;
				height: 20px;
				margin: 5px,0px;
			}
			.column span{
				margin-left: 300px;
			}
		</style>
	</head>
	<body>
		<form action="#" method="get"></form>
		<p  align="center"><b>填写注册信息</b></p>
		<div id="main">
			<div class="rowline">
				<div class="column">
					<span>用户名:</span>
					
				</div>
				<div class="column">
						<input tye="text" id="userName" name="useName"  />
					</div>
			</div>
			<div class="rowline">
				<div class="column">
	            <span>密码： </span>
		       
				</div> 
				<div class="column">
		        	<input tye="password" id="userPsw"  />
		        </div>
				<div class="rowline">
				<div class="column">
				<span>邮箱： </span>
				</div>
		       <div class="column">
				<input tye="email" id="userEmail" name="useEmail" />
			</div>
				</div>
		<div class="rowline">
			<div class="column">
	            <span>性别： </span>
		        </div>
		        <div class="column">
				<input type="radio" id="userSex1" name="userSex"/>女
				<input type="radio" id="userSex2" name="userSex"/>男
			</div> 
		    </div>
		   
		<div class="rowline">
			<div class="column">
	            <span>兴趣爱好： </span>
		        </div>
		        <div class="column">
				<input type="checkbox" check="check" id="userHobby1" name="userHobby" />学习
				<input type="checkbox" id="userHobby2" name="userHobby" />游戏
				<input type="checkbox" id="userHobby3" name="userHobby" />运动
				<input type="checkbox" id="userHobby4" name="userHobby" />编程
			</div>
			</div>
		</div>
		<div class="rowline">
			<div class="column">
	            <span>专业： </span>
		        </div>
		        <div class="column">
				<select id="userPsw" name="userMajor" style="width: 80px;">
					<option value="cs" selected="selected">计算机</option>
					<option value="jx">机械</option>
					<option value="fc">金融</option>
				</select>
			</div>
		</div>
		<div class="rowline">
			<div class="column">
	            <span>照片： </span>
		        </div>
		        <div class="column">
			    <input type="file" />
			</div>
			</div>
				<div class="rowline" style="height: 400px;">
					<div class="column" style="padding-top: 70px;">
	            <span>自我介绍： </span>
		        </div>
		        <div class="column">
				<textarea id="userEmail" name="userInfo" rows="10" cols="30"></textarea>
			</div>
			</div>
		<div class="rowline">
			<div class="column">
				<span>图片： </span>
				</div>
				<div class="column">
				<img src="u=2226964663,1180072971&fm=27&gp=0.jpg"  style="width: 120px;height: 80px;" />"
			</div>
		</div>
		<div class="rowline">
				<div class="column"style="padding-top: 70px;">
					<span><input type="submit" value="提交信息"  onclick="return checkme()"/></span>
					</div>
				<div class="column"style="padding-top: 70px;">
				<input type="reset" value="重置" />
			</div>	
		
	</div>
	</div>
	</form>
	</body>
	<script type="text/javascript">
		function checkme(){
			var alertMsg= "";
		var domUserName=document.getElementById("userName");
		var strUserName =  domUserName.value;
		
		
		if (!strUserName||strUserName==""){
			alertMsg+="请输入用户名\n"
		}
			var domUserName=document.getElementById("userPsw").value;
			if(!(strUserName&&strUserName!="")){
				alertMsg+="请输入密码\n"
			}
			var radioUserSex =document.getElementsByName("userSex");
			var isSexcheck=false;
			for (var i=0;i<radioUserSex.length;i++ ) {
			  if(radioUserSex[i].checked){
			  	isSexcheck=true;
			  	break;
			  }
			}
			if(isSexcheck==false){
				alertMsg+="请选择性别\n";
			}
			var radioUserHobby =document.getElementsByName("userHobby");
			var isHobbycheck=false;
			for(var j=0;j<radioUserHobby.length;j++ ){
				if(radioUserHobby[j].checked){
					isHobbycheck=true;
					break;
				}
			}
			if(isHobbycheck==false){
				alertMsg+="请选择兴趣爱好\n";
			}
			var selectMajor = document.getElementById("userMajor");
			console.info("select:"+selectMajor.selected);
			console.info("selectIndex:"+selectMajor.selectedIndex);
			if(selectMajor.selectedIndex==0){
				alertMsg+="请选择专业\n"
			}
			if(alertMsg==""){
				return true;
			}else{
				alert(alertMsg);
				return false;
			}
		
		}
	</script> 
</html>
